<template>
  <div class="flex flex-col">
    <label class="text-sm font-medium text-gray-700 mb-1.5">
      {{ label }}
    </label>
    <input
      v-if="type !== 'textarea' && type !== 'select'"
      :type="type"
      :value="modelValue"
      :placeholder="placeholder"
      class="px-3 py-2 border border-gray-300 rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    />
    <select
      v-else-if="type === 'select'"
      :value="modelValue"
      class="px-3 py-2 border border-gray-300 rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
    >
      <option value="">{{ placeholder }}</option>
      <option
        v-for="option in options"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </option>
    </select>
    <textarea
      v-else
      :value="modelValue"
      :placeholder="placeholder"
      :rows="rows"
      class="px-3 py-2 border border-gray-300 rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
    />
  </div>
</template>

<script setup lang="ts">
interface Option {
  value: string
  label: string
}

interface Props {
  label: string
  type?: 'text' | 'email' | 'tel' | 'date' | 'textarea' | 'select'
  placeholder?: string
  modelValue: string
  options?: Option[]
  rows?: number
}

defineProps<Props>()
defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>
